<template>
    <el-row class="myheader">
        <el-col :span="12">
            <img width="48" :src="src" />
            <span class="myheader_title">{{ data }}</span>
        </el-col>
        <el-col :span="12" class="right_select" v-show="!show">
            <el-input v-model="value" class="right_el_select" :placeholder="placeholder"
                :prefix-icon="Search"></el-input>
        </el-col>
        <div class="lan"></div>
    </el-row>
</template>

<script setup lang="ts">
import { Search } from '@element-plus/icons-vue';
import { ref, watch } from 'vue';
const p = defineProps<{ src: string, data: string, show?: boolean, change?: Function, placeholder?: string }>()
const value = ref('')

watch(() => value.value, e => {
    if (p.change) {
        p.change(e)
    }
})

</script>

<style scoped>
.myheader {
    padding: 4px;
    height: 56px;
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    position: relative;
}

.myheader_title {
    font-style: normal;
    font-size: 18px;
    line-height: 48px;
    margin-left: 24px;
    font-family: FZZongYi-M05S;

}

.right_select {
    text-align: right;
    padding-top: 6px;
}

.lan {
    width: 12px;
    height: 3px;
    background: linear-gradient(315deg, #0670F8 0%, #34C7FC 100%);
    position: absolute;
    right: 0;
    bottom: 0;

}

.right_el_select {
    --el-fill-color-blank: rgba(0, 0, 0, 0);
    --el-border-color: rgba(0, 0, 0, 0);
    --el-border-color-hover: rgba(0, 0, 0, 0);
    --el-select-input-focus-border-color: rgba(0, 0, 0, 0);
    --el-text-color-regular: rgba(255, 255, 255, 0.5);
    --el-popup-modal-bg-color: #fff;
    --el-input-icon-color: rgba(255, 255, 255, 0.5);
    width: 151px;
}
</style>